<template>
  <div class="content_body">
    <div style="margin: 10px 0 10px 10px;">
      <el-button-group>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd()">新增菜单</el-button>
        <el-button type="primary" icon="el-icon-search" @click="load()">查询菜单</el-button>
      </el-button-group>
      <el-row>
          <el-col :span="4">
              <el-input v-model="pageInfo.name" placeholder="菜单名称"></el-input>
          </el-col>
        </el-row>
    </div>
    <div style="margin: 0 10px 0 10px;">
      <el-table
        ref="multipleTable"
        :data="menuList"
        tooltip-effect="dark"
        style="width: 100%"
        border>
        <el-table-column type="selection" min-width="5%" align="center"></el-table-column>
        <el-table-column prop="name" label="菜单名称"  min-width="15%" header-align="center"></el-table-column>
        <el-table-column prop="parent_name" label="父节点" min-width="10%" header-align="center"></el-table-column>
        <el-table-column prop="url" label="菜单地址" min-width="20%" header-align="center"></el-table-column>
        <el-table-column label="菜单类型" min-width="10%" align="center">
          <template slot-scope="scope">
            {{scope.row.type == '1'? '管理端': '门户端'}}
          </template>
        </el-table-column>
        <el-table-column label="权限类型" min-width="10%" align="center">
          <template slot-scope="scope">
            {{scope.row.is_open == '1'? '所有人开放': '需要权限'}}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="添加时间" min-width="15%" align="center"></el-table-column>
        <el-table-column prop="seq" label="排序因子" min-width="10%" header-align="center"></el-table-column>
        <el-table-column label="操作" min-width="30%" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleUrlAuth(scope.$index, scope.row)">接口权限</el-button>
            <el-button size="mini" type="warning" @click="handleMarkAuth(scope.$index, scope.row)">自定义权限</el-button>
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-body">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNo"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="pageInfo.pageSize"
            layout="sizes, prev, pager, next"
            :total="pageInfo.totalRecord">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="urlAuth">
      <el-dialog :title="urlAuthForm.title" :visible.sync="dialogUrlAuthFormVisible" :modal-append-to-body="false" width="60%">
        <el-row>
          <el-col :span="12">
            <el-select  placeholder="请选择接口" size='small' v-model="pageInfo.url.index" filterable style="width: 100%;">
              <el-option v-for="(item, index) in urlAllList" :key="item.apiurl_id" :label="`【${item.url}】${item.apiurl_name}`" :value="index"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4" type="flex">
              <el-button type="success" size='small' @click="addUrl()">添加</el-button>
          </el-col>
        </el-row>
        <el-row>
          <template v-if="urlAuthForm.list.length">
            <el-col  type="flex" :span="12" v-for="(item, index) in urlAuthForm.list" :key="item.name">
              <el-tag
                justify="center"
                class="edu-el-tag"
                closable
                size='larger'
                @close="removeUrl(index)">
                【{{item.url}}】{{item.apiurl_name}}
              </el-tag>
            </el-col>
          </template>
          <template v-if="!urlAuthForm.list.length">
            <el-col :span="12" justify="center">
              <el-tag
                type="warning"
                class="edu-el-tag"
                size='larger'>
                【此菜单暂无url权限】
              </el-tag>
            </el-col>
          </template>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogUrlAuthFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveUrlAuthForm()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="markAuth">
      <el-dialog :title="markAuthForm.title" :visible.sync="dialogMarkAuthFormVisible" :modal-append-to-body="false" width="60%">
        <el-row>
          <el-col :span="6">
            <el-select  placeholder="请选择接口" size='small' v-model="pageInfo.mark.index" filterable style="width: 100%;">
              <el-option v-for="(item, index) in markAllList" :key="item.id" :label="`【${item.code}】${item.name}`" :value="index"></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-button type="success" size="small" @click="addMark">添加</el-button>
          </el-col>
        </el-row>
        <el-row>
            <template v-if="markAuthForm.list.length">
          <el-col :span="4" v-for="(item, index) in markAuthForm.list" :key="item.id">
            <el-tag
                justify="center"
                class="edu-el-tag"
                closable
                size='larger'
                @close="removeMark(index)">
                【{{item.code}}】{{item.name}}
              </el-tag>
          </el-col>
            </template>
            <template v-else>
              <el-col :span="12" justify="center">
                <el-tag
                  type="warning"
                  class="edu-el-tag"
                  size='larger'>
                  【此菜单暂无自定义权限标识】
                </el-tag>
              </el-col>
            </template>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogMarkAuthFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveMarkAuthForm()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="addMenu">
      <el-dialog title="添加菜单信息" :visible.sync="dialogAddFormVisible" :modal-append-to-body="false" width="60%">
        <el-form :model="form">
          <div class="line-Body">
            <div class="line-left">
              <el-form-item label="菜单名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
            </div>
            <div class="line-mid"></div>
            <div class="line-right">
              <el-form-item label="上级菜单" :label-width="formLabelWidth">
                <el-select v-model="form.parent_id" filterable placeholder="请选择上级菜单" style="width:100%;">
                  <el-option v-for="item in menuAllList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-left">
              <el-form-item label="跳转地址" :label-width="formLabelWidth">
                <el-input v-model="form.url" auto-complete="off"></el-input>
              </el-form-item>
            </div>
            <div class="line-mid"></div>
            <div class="line-right">
              <el-form-item label="排序因子" :label-width="formLabelWidth">
                <el-input type="number" v-model="form.seq" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-right">
              <el-form-item label="菜单类型" :label-width="formLabelWidth">
                <el-select v-model="form.type" placeholder="请选择菜单类型" style="width:100%;">
                  <el-option label="门户端" value="0"></el-option>
                  <el-option label="管理端" value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-right">
              <el-form-item label="权限类型" :label-width="formLabelWidth">
                <el-select v-model="form.is_open" placeholder="请选择权限类型" style="width:100%;">
                  <el-option label="需要权限" value="0"></el-option>
                  <el-option label="对所有人开放" value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="line-Body">
            <div class="line-all">
              <el-form-item label="备注信息" :label-width="formLabelWidth">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.bz" auto-complete="off"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addMenu()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
  
</template>
<script>
export default {
  name: "menu",
  data() {
    return {
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        url: {
          index: 0
        },
        mark: {
          index: 0
        }
      },
      urlAuthForm: {
        title: "",
        list: [],
        map: {}
      },
      markAuthForm: {
        title: "",
        list: [],
        map: {}
      },
      form: {},
      menuList: [],
      menuAllList: [],
      urlAllList: [],
      markAllList: [],
      dialogAddFormVisible: false,
      dialogUrlAuthFormVisible: false,
      dialogMarkAuthFormVisible: false,
      formLabelWidth: "70px"
    };
  },
  mounted: function() {
    this.load();
    this.ajax({
      url: this.API.apiurl.list,
      data: {},
      success: resultData => {
        this.urlAllList = resultData.data;
        this.pageInfo.url.index = 0;
      }
    });
    this.ajax({
      url: this.API.mark.list,
      data: {},
      success: resultData => {
        this.markAllList = resultData.data;
        this.pageInfo.mark.index = 0;
      }
    });
  },
  methods: {
    load: function() {
      this.ajax({
        url: this.API.menu.page,
        data: this.pageInfo,
        success: resultData => {
          this.menuList = resultData.data.results;
          this.pageInfo.totalRecord = resultData.data.totalRecord;
        }
      });
      this.ajax({
        url: this.API.menu.allList,
        data: this.pageInfo,
        success: resultData => {
          this.menuAllList = resultData.data;
        }
      });
    },
    handleSizeChange: function(val) {
      this.pageInfo.pageSize = val;
      this.load();
    },
    handleCurrentChange: function(val) {
      this.pageInfo.pageNo = val;
      this.load();
    },
    addMenu: function() {
      console.log(this.url);
      console.log(this.API.menu[this.url]);
      console.log(this.form);
      this.ajax({
        url: this.API.menu[this.url],
        data: this.form,
        success: resultData => {
          this.list = resultData.data;
          if (resultData.status === 0) {
            this.$message({
              message: "恭喜你，记录已保存成功",
              type: "success"
            });
            this.dialogAddFormVisible = false;
            this.load();
          } else {
            this.$message.error(resultData.msg);
          }
        }
      });
    },
    handleAdd: function() {
      this.form = {};
      this.url = "save";
      this.dialogAddFormVisible = true;
    },
    handleDelete: function(index, menu) {
      this.url = "delete";
      this.$confirm("此操作将删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajax({
            url: this.API.menu[this.url],
            data: menu,
            success: resultData => {
              if (resultData.status === 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.load();
              } else {
                this.$message({
                  showClose: true,
                  message: resultData.msg,
                  type: "error"
                });
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleEdit: function(index, menu) {
      this.form = menu;
      this.url = "update";
      this.dialogAddFormVisible = true;
    },
    handleUrlAuth: function(index, menu) {
      this.ajax({
        url: this.API.apiurl.findMenuUrlList,
        data: { menu_id: menu.id },
        success: resultData => {
          this.urlAuthForm = {
            menu_id: menu.id,
            title: menu.name,
            list: resultData.data,
            map: {}
          };
          for (let index = 0; index < resultData.data.length; index++) {
            const element = resultData.data[index];
            this.urlAuthForm.map[element.apiurl_id] = true;
          }
          this.dialogUrlAuthFormVisible = true;
        }
      });
    },
    addUrl: function() {
      if (
        this.urlAuthForm.map[this.urlAllList[this.pageInfo.url.index].apiurl_id]
      ) {
        this.$message({
          message: "不可重复添加",
          type: "warning",
          showClose: true
        });
        return false;
      }
      this.urlAuthForm.map[
        this.urlAllList[this.pageInfo.url.index].apiurl_id
      ] = true;
      this.urlAuthForm.list.push(this.urlAllList[this.pageInfo.url.index]);
    },
    removeUrl: function(index) {
      this.urlAuthForm.map[this.urlAuthForm.list[index].apiurl_id] = false;
      this.urlAuthForm.list.splice(index, 1);
    },
    saveUrlAuthForm: function() {
      let para = {
        menu_id: this.urlAuthForm.menu_id,
        list: this.urlAuthForm.list
      };
      this.ajax({
        url: this.API.apiurl.updateMenuUrl,
        data: para,
        success: resultData => {
          this.$message.success("操作成功");
        }
      });
    },
    handleMarkAuth: function(index, menu) {
      this.ajax({
        url: this.API.apiurl.findMenuMarkList,
        data: { menu_id: menu.id },
        success: resultData => {
          let list = [];
          for (let index = 0; index < resultData.data.length; index++) {
            const element = resultData.data[index];
            list.push({
              id: element.id,
              name: element.mark_name,
              code: element.mark_code
            });
          }
          this.markAuthForm = {
            menu_id: menu.id,
            title: menu.name,
            list: list,
            map: {}
          };
          for (let index = 0; index < resultData.data.length; index++) {
            const element = resultData.data[index];
            this.markAuthForm.map[element.mark_id] = true;
          }
          this.dialogMarkAuthFormVisible = true;
        }
      });
    },
    addMark: function() {
      if (this.pageInfo.mark.index === undefined) {
        this.$message({
          message: "请选择标识",
          type: "warning",
          showClose: true
        });
        return false;
      }
      if (
        this.markAuthForm.map[this.markAllList[this.pageInfo.mark.index].id]
      ) {
        this.$message({
          message: "不可重复添加",
          type: "warning",
          showClose: true
        });
        return false;
      }
      this.markAuthForm.map[
        this.markAllList[this.pageInfo.mark.index].id
      ] = true;
      this.markAuthForm.list.push(this.markAllList[this.pageInfo.mark.index]);
    },
    removeMark: function(index) {
      this.markAuthForm.map[this.markAuthForm.list[index].id] = false;
      this.markAuthForm.list.splice(index, 1);
    },
    saveMarkAuthForm: function() {
      let para = {
        menu_id: this.markAuthForm.menu_id,
        list: this.markAuthForm.list
      };
      this.ajax({
        url: this.API.apiurl.updateMenuMark,
        data: para,
        success: resultData => {
          this.$message.success("操作成功");
        }
      });
    }
  }
};
</script>

<style scoped>
.edu-el-tag {
  margin-top: 0.3rem;
}
</style>

